<template>
    <div class="main">
        <cvue-dialog
        :dialogVisible='dialogVisible'
        title='编辑教职工'
        :isShowFoot='true'
        dialogWidth='60%'
        @handleOpen='getDetail'
        @closeDialog='closeDialog'
        @confirmDialog='confirmDialog'
        @handleClose='closeDialog'>
        <div class="dialog-body" slot="dialogBody">
            <el-tabs v-model='activeCard' type="card">
                <el-tab-pane label="基本信息" name="first">
                    <el-form inline label-width="130px">
                        <el-form-item label="人脸图片">
                             <upload ref="upload"
                            :accept="['.png','.jpg','.jpeg']"
                            :fileSize="{size:1024*1024*10,messge:'只能上传10m以内的图片'}">
                            </upload>
                        </el-form-item>
                        <el-form-item label="教职工姓名" required>
                            <el-input class="formWidth" type="text"  v-model="teacherInfo.name" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="性别">
                            <el-select class="formWidth" v-model="teacherInfo.gender" placeholder="请选择">
                                <el-option label="男" value="true">
                                </el-option>
                                <el-option label="女" value="false">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="手机号" required>
                            <el-input class="formWidth" type="text" v-model="teacherInfo.cellPhoneNum"  maxlength="11" @blur="userDetail(teacherInfo.cellPhoneNum)"></el-input>
                            <p class="isUser" v-if="isLogin"><i class="el-icon-warning"></i>手机号格式错误</p>
                        </el-form-item>
                        <el-form-item label="教职工号">
                            <el-input class="formWidth" type="text"  v-model="teacherInfo.jobNumber" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="国籍/地区">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.nationality" maxlength="20"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="证件类型">
                            <el-select class="formWidth" v-model="teacherInfo.idTypeCode" placeholder="请选择">
                                <el-option label="身份证" value="身份证">
                                </el-option>
                                <el-option label="护照" value="护照">
                                </el-option>
                                <el-option label="其他" value="其他">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="证件号">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.idNumber" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="家庭住址">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.familyAddress" maxlength="30"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="所属部门">
                            <treeselect class="treeHeight" :maxHeight='120' v-model="deptIds" :multiple="true" :normalizer='normalizer' placeholder='请选择部门' :options="deptList" />
                        </el-form-item>
                        <el-form-item label="职务">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.jobPosition" maxlength="20"></el-input>
                        </el-form-item>
                        <el-form-item label="在职状态">
                            <span v-for="item in onJobState" :key="item.value">
                                 <span v-if="item.value == teacherInfo.status">
                                    {{item.name}}
                                </span>
                            </span>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="教授科目">
                            <el-select class="formWidth" v-model="subjectIds" multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in subjectList" :key="index" :label="item.stageName + '-' + item.name" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="教授班级">
                            <el-select class="formWidth" v-model="teachClass" multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in classList" :key="index" :label="item.gradeName+item.className" :value="item.classId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="班主任班级">
                            <el-select class="formWidth" v-model="marstClass" multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in classList" :key="index" :label="item.gradeName+item.className" :value="item.classId">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="账号信息">
                            <el-input class="formWidth" type="text" disabled v-model="teacherInfo.loginName"></el-input>
                        </el-form-item>
                        <el-form-item label="所属角色">
                            <el-select class="formWidth" v-model="a"  multiple collapse-tags placeholder="请选择">
                                <el-option v-for="(item, index) in roleList" :key="index" :label="item.roleName" :value="item.id">
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="工作记录">
                            <el-input class="formWidth" type="textarea" v-model="teacherInfo.workRecord" maxlength="200"></el-input>
                        </el-form-item>
                        
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="备注信息">
                            <el-input class="formWidth" type="textarea" v-model="teacherInfo.remarks" maxlength="200"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="扩展信息" name="second">
                    <el-form inline label-width="130px">
                        <el-form-item label="出生日期">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.birthDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="出生地">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.birthPlace"></el-input>
                        </el-form-item>
                        <el-form-item label="籍贯">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.nativePlace"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="民族">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.nationCode"></el-input>
                        </el-form-item>
                        <el-form-item label="学历">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.eduBackgroundCode"></el-input>
                        </el-form-item>
                        <el-form-item label="学位">
                             <el-input class="formWidth" type="text" v-model="teacherInfo.academicDegreeCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="毕业院校">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.graduationSchool"></el-input>
                        </el-form-item>
                        <el-form-item label="所有专业">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.specialty"></el-input>
                        </el-form-item>
                        <el-form-item label="学制">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.schoolingLengthCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="政治面貌">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.politicalStatusCode"></el-input>
                        </el-form-item>
                        <el-form-item label="婚姻状况">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.maritalStatusCode"></el-input>
                        </el-form-item>
                        <el-form-item label="健康状况">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.healthStatusCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="入学年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.enrolmentDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="毕业年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.graduationDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="职称">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.positionTitleCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form label-width="130px">
                        <el-form-item label="简介">
                            <el-input :rows=3 type="textarea" v-model="teacherInfo.profile"></el-input>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="详细信息" name="third">
                    <el-form inline label-width="130px">
                        <el-form-item label="现居住地址">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.residentAddress"></el-input>
                        </el-form-item>
                        <el-form-item label="邮政编码">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.postalCode"></el-input>
                        </el-form-item>
                        <el-form-item label="邮箱">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.email"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="参加工作年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.firstJobBeginDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="进本校年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.joinThisSchoolDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="130px">
                        <el-form-item label="教职工来源">
                           <el-input class="formWidth" type="text" v-model="teacherInfo.teacherSourceCode"></el-input>
                        </el-form-item>
                        <el-form-item label="教职工类别">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.teacherTypeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="是否在编">
                            <el-switch
                                v-model="teacherInfo.permanentEmpFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                     <el-form inline label-width="130px">
                        <el-form-item label="用人形式">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.employModeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="签订合同情况">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.contractTypeCode"></el-input>
                        </el-form-item>
                        <el-form-item label="信息技术能力">
                            <el-input class="formWidth" type="text" v-model="teacherInfo.infoTechAbilityCode"></el-input>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                       <el-form-item label="是否参加基层服务项目">
                            <el-switch
                                v-model="teacherInfo.joinBasicServiceProjectFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                        <el-form-item label="参加基层服务项目起始年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.basicServiceProjectBeginDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="参加基层服务项目结束年月">
                            <el-date-picker
                                class="formWidth"
                                v-model="teacherInfo.basicServiceProjectEndDate"
                                type="date"
                                placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                    </el-form>
                     <el-form inline label-width="250px">
                        <el-form-item label="是否全日制师范类专业毕业">
                            <el-switch
                                v-model="teacherInfo.fullTimeNormalSchoolGraduateFlag"
                            >
                            </el-switch>
                        </el-form-item>
                       <el-form-item label="是否受过特教专业培养培训">
                            <el-switch
                                v-model="teacherInfo.trainedForSpecialEduFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否有特殊教育从业证书">
                            <el-switch
                                v-model="teacherInfo.hasSpecialEduEmpCertifFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                    <el-form inline label-width="250px">
                        <el-form-item label="是否特级教师">
                            <el-switch
                                v-model="teacherInfo.specialGradeTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                       <el-form-item label="是否县级及以上骨干教师">
                            <el-switch
                                v-model="teacherInfo.countyLevelPlusCoreTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否心理健康教育教师">
                            <el-switch
                                v-model="teacherInfo.mentalHealthTeacherFlag"
                            >
                            </el-switch>
                        </el-form-item>
                        <el-form-item label="是否属于免费（公费）师范生">
                            <el-switch
                                v-model="teacherInfo.govFundsNormalSchoolStudentFlag"
                            >
                            </el-switch>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        </cvue-dialog>
    </div>
</template>
<script>
import cvueDialog from '@/components/cvue-dialog'
import upload from '@/components/upload2'
export default {
    name: 'addList',
    components: {
        cvueDialog, upload
    },
    props: {
        dialogVisible: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            a: '',
            normalizer (node) {
                return {
                    id: node.id,
                    label: node.name,
                    children: node.children.length > 0 ? node.children : 0
                }
            },
            activeCard: 'first', // 切换标签标识
            teacherInfo: '',
            teachClass: [],
            marstClass: [],
            subjectIds: [],
            deptIds: [],
            teacherClassMappingDtos: [],
            isLogin: false
        }
    },
    computed: {
        subjectList () {
            return this.$store.state.teacher.subjectList
        },
        classList () {
            return this.$store.state.teacher.classList
        },
        deptList () {
            return this.$store.state.teacher.deptList
        },
        roleList () {
            return this.$store.state.teacher.roleList
        },
        onJobState () {
            return this.$store.state.teacher.onJobState
        },
        id () {
            return this.$store.state.teacher.id
        },
        teacherData () {
            return this.$store.state.teacher.teacherData
        },
        schoolId () {
            return this.$store.state.teacher.teacherData.schoolId
        }
    },
    methods: {
         // 获取班级
        getClassList () {
            var params = {
                schoolId: this.schoolId
            }
            this.$store.dispatch('teacher/GetClassList', params)
        },
        // 获取科目
        getSubject () {
            var params = {
                schoolId: this.schoolId,
                PageNum: 1,
                PageSize: 1000
            }
            this.$store.dispatch('teacher/GetSubject', params).then(
                res => {
                    this.$store.state.teacher.subjectList = res.items
                }
            )
        },
        // 获取部门 
        getDept () {
            var params = {
                schoolId: this.schoolId
            }
            this.$store.dispatch('teacher/GetDept', params).then(
                res => {
                    this.$store.state.teacher.deptList = res
                }
            )
        },
        
         // 判断user信息
        userDetail (val) {
            if (!(/^1[3456789]\d{9}$/.test(val))) {
                this.isLogin = true
                return false
            } else {
                this.isLogin = false
            }
        },
        getDetail () {
            // this.getSubject()
            this.getDept()
            this.getClassList()

            Object.assign(this.$data, this.$options.data())
            this.$store.dispatch('teacher/GetOneTeacher', {id: this.id}).then(
                res => {
                    this.teacherInfo = res
                    this.$refs.upload.progressList = res.faceImgUrl ? [{url: res.faceImgUrl}] : []
                    this.teacherInfo.gender = this.teacherInfo.gender.toString()
                    this.teacherInfo.teacherclassmapping.forEach(
                        item => {
                            if (!item.deleteFlag) {
                                this.teachClass.push(item.schoolClassId)
                            } 
                            if (item.isChargeTeacher) {
                                this.marstClass.push(item.schoolClassId)
                            }
                        }
                    )
                    this.teacherInfo.teacherdeptmapping.forEach(
                        item => {
                            this.deptIds.push(item.deptId)
                        }
                    )
                    this.teacherInfo.teachersubjectmapping.forEach(
                        item => {
                            this.subjectIds.push(item.subjectId)
                        }
                    )
               }
           )
        },
        concatClass () {
            this.teacherClassMappingDtos = []
            this.teachClass.forEach(
                item => {
                    var flag = false
                    this.marstClass.forEach(
                        item2 => {
                            if (item == item2) {
                                flag = true
                            }
                        }
                    )
                    var obj = ''
                    if (flag) {
                        obj = {isChargeTeacher: true, isTeach: true, schoolClassId: item}
                    } else {
                        obj = {isChargeTeacher: false, isTeach: true, schoolClassId: item}
                    }
                    this.teacherClassMappingDtos.push(obj)
                }
            )
            var arr = []
            this.marstClass.forEach(
                item => {
                    var flag = true
                    this.teacherClassMappingDtos.forEach(
                        item2 => {
                            if (item == item2.schoolClassId) {
                                flag = false
                            }
                        }
                    )
                    if (flag) {
                        var obj = {isChargeTeacher: true, isTeach: false, schoolClassId: item}
                        arr.push(obj)
                    }
                }
            )
            this.teacherClassMappingDtos = this.teacherClassMappingDtos.concat(arr)
        },
        check () {
            if (!this.teacherInfo.name) {
                this.$message({
                    message: '教职工姓名不能为空',
                    type: 'error'
                })
                return false
            }
            if (!this.teacherInfo.cellPhoneNum) {
                this.$message({
                    message: '手机号不能为空',
                    type: 'error'
                })
                return false
            }
            return true
        },
        editTeacher () {
            if (!this.check()) {
                return
            }
            this.concatClass()
            var urls = []
            this.$refs.upload.getFileList().forEach(item => {
                urls.push(item.url)
            })
            this.teacherInfo.faceImgUrl = urls.join()
            this.teacherInfo.subJectIds = this.subjectIds
            this.teacherInfo.deptIds = this.deptIds
            this.teacherInfo.teacherClassMappingDtos = this.teacherClassMappingDtos
            debugger
            this.$store.dispatch('teacher/EditOneTeacher', this.teacherInfo).then(
                res => {
                    this.$message({
                        message: '编辑成功',
                        type: 'success'
                    })
                    this.$emit('confirmDialog')
                }
            ).catch(
                res => {
                   
                }
            )
        },
        closeDialog () {
            this.$emit('closeDialog')
        },
        confirmDialog () {
            this.editTeacher()
           // this.$emit('confirmDialog')
        }
    }
}
</script>
<style scoped>
    .main{
        background: #fff;
    }
    .searchHead{
        border-bottom: 1px solid #333;
    }
    .btnLine{
        margin: 20px 0;
    }
    .formWidth{
        display: inline-block;
        width: 176px;
    }
    .treeHeight{
        width:176px; 
        line-height: 16px;
    }
    .isUser{
        color: red;
        font-size: 14px;
    }
</style>
